<script setup lang="ts">
definePageMeta({ layout: "admin" });

const state = reactive<{
  showUrlDialog: boolean;
  delUrl: AdminActionUrl | null;
  editUrl: ApiUrl | null;
}>({
  showUrlDialog: false,
  delUrl: null,
  editUrl: null,
});

const pagination = ref<Pagination<UserUrl>>();
const list = computed(() => pagination.value?.data);

const { $get, $del } = use$fetch();
const { msg } = useStatus();

const page = useQueryPage();
const loadData = async () => {
  await $get<Pagination<UserUrl>>(
    "/admin/url",
    (v) => {
      pagination.value = v!;
      return v;
    },
    { page }
  );
};

const rc = useRuntimeConfig();
const fillUrl = (url: string) => `${rc.public.visitUrl}/${url}`;
const fixedUrl = (url: string, maxLen = 20) => {
  if (!url) {
    return "(空)";
  }
  if (url.length <= maxLen) {
    return new URL(url).host;
  }
  const u = new URL(url);
  const h = u.host;

  const urlArr = h.split("");

  return `${urlArr.slice(0, maxLen - 2).join("")}..`;
};

const handleDel = async () => {
  await $del(`/admin/url/${state.delUrl?.id}`, () => {
    msg.value = "删除成功";
    state.delUrl = null;
    loadData().then();
  });
};
await loadData();
</script>

<template>
  <AdminToolbar
    @add="
      () => {
        state.showUrlDialog = true;
        state.editUrl = null;
      }
    "
  >
    <template #title>链接管理</template>
  </AdminToolbar>

  <section class="my-6 bg-white p-3 rounded-md shadow-md lg:p-6">
    <div class="overflow-x-auto">
      <table class="table">
        <thead>
          <tr>
            <th>用户</th>
            <th>原地址</th>
            <th>短链接</th>
            <th>浏览次数</th>
            <th>访问密码</th>
            <th>过期时间</th>
            <th>管理</th>
          </tr>
        </thead>
        <tbody>
          <tr v-if="list" v-for="i in list" :key="i.id">
            <td class="text-nowrap truncate" :title="i.email">
              {{ i.email }}
            </td>
            <td>
              <a :href="i.origin" target="_blank" :title="i.origin">{{
                fixedUrl(i.origin)
              }}</a>
            </td>
            <td>
              <a :href="fillUrl(i.url)" target="_blank">{{ i.url }}</a>
            </td>
            <td>{{ i.hit }}</td>
            <td>
              <Icon
                v-if="i.has_password"
                name="uil:check"
                class="text-gray-50 border rounded bg-green-700"
              />
              <Icon
                v-else
                name="uil:times"
                class="text-gray-50 border rounded bg-gray-500"
              />
            </td>
            <td>
              <div class="text-xs text-wrap" v-if="i.has_expired">
                {{ i.expired }}
              </div>
              <div
                v-else
                class="text-xs px-1 py-0.5 rounded bg-gray-50 border inline-block"
              >
                永不过期
              </div>
            </td>
            <td>
              <div>
                <div class="flex justify-start items-center gap-x-1">
                  <button
                    type="button"
                    class="px-1 py-0.5 text-sm border rounded bg-cyan-600 text-white flex justify-start items-center gap-x-1"
                    @click="
                      () => {
                        state.showUrlDialog = true;
                        state.editUrl = { ...i };
                      }
                    "
                  >
                    <Icon name="uil:edit-alt" />
                    <div class="hidden lg:block">修改</div>
                  </button>

                  <button
                    type="button"
                    class="px-1 py-0.5 text-sm border rounded bg-red-600 text-white flex justify-start items-center gap-x-1"
                    @click="
                      state.delUrl = {
                        ...i,
                      }
                    "
                  >
                    <Icon name="uil:trash" />
                    <div class="hidden lg:block">删除</div>
                  </button>
                </div>
              </div>
            </td>
          </tr>
          <tr v-else>
            <td colspan="7">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="flex flex-col items-end my-3">
      <PaginationBar
        :pagination="(pagination  as PaginationMeta)"
        v-if="pagination"
      />
    </div>
  </section>

  <AdminDelDialog
    v-if="state.delUrl"
    :id="state.delUrl.id"
    :ext="state.delUrl.url"
    title="删除短链接"
    @click="state.delUrl = null"
    @ok="handleDel"
    @cancel="state.delUrl = null"
  />

  <AdminUrlInput
    :url="state.editUrl || null"
    v-if="state.showUrlDialog"
    @click="
      () => {
        state.showUrlDialog = false;
        state.editUrl = null;
      }
    "
    @ok="
      () => {
        state.showUrlDialog = false;
        state.editUrl = null;
        loadData().then();
      }
    "
    @cancel="
      () => {
        state.showUrlDialog = false;
        state.editUrl = null;
      }
    "
  />
</template>
